<template>
  <div class="goods-info">
    <div class="goods-img">
<!--       <video :src="goodsInfo.goods_video" :poster="goodsInfo.goods_img" style="width:100%;" controls="controls" preload="meta" v-if="goodsInfo.goods_video"></video>
      <img :src="goodsInfo.goods_img" alt="" v-else> -->
      <img :src="goodsInfo.goods_img" alt="">
    </div>
    <div class="goods-price">
      <div class="name">{{goodsInfo.goods_name}}</div>
      <div class="price-footer">
        ￥<span class="cash">{{goodsInfo.price}}</span>
        <!-- <span class="points">{{parseInt(goodsInfo.points)}}积分/台</span> -->
        <span class="points">已售{{goodsInfo.goods_sell_num}}</span>
      </div>
    </div>
    <div class="goods-type">
      <!-- <i class="more"></i> -->
      <div class="select-type"><span class="text">选择</span><span class="tips">{{goodsInfo.goods_name}}</span></div>
      <div class="parameter clearfix"><span class="text">参数</span><span class="tips" v-html="goodsInfo.describe"></span></div>
    </div>
    <div class="review">
      <div class="nav-header">
        <span class="review-num">商品评价({{goodsInfo.comment_num}})</span>
        <span class="look-all" @click="allReview = true">查看全部评价</span>
      </div>
      <moudel-review :list="reviewList.slice(0,2)"></moudel-review>
    </div>

    <div class="v-transfer-dom">
      <popup v-model="allReview" height="100%" style="background: #f4f6f8;z-index:9999;">
        <x-header 
          title="全部评价"
          :left-options="{
            backText: '',
            preventGoBack: true
          }"
          @on-click-back="allReview = false">
        </x-header>
        <moudel-review :list="reviewList"></moudel-review>
      </popup>
    </div>

    <div class="goods-info-footer">
      <div class="icon-wrap">
        <div class="icon-item" @click="collect">
          <i class="icon-collect" :class="{active: isCollect}"></i><br><span class="icon-text">收藏</span>
        </div>
<!--         <div class="icon-item" @click="share">
          <i class="icon-share"></i><br><span class="icon-text">分享</span>
        </div> -->
<!--         <div class="icon-item" @click="reviewPop()">
          <i class="icon-review"></i><br><span class="icon-text">评价</span>
        </div> -->
      </div>
      <div class="appointment" @click="toAppointment()">立即预约</div>
    </div>

    <div v-transfer-dom>
      <popup v-model="popupShow" is-transparent>  
        <div class="popup-box" :class="{isX: isIphoneX}">
          <div class="goods-cover clearfix">
            <img :src="goodsInfo.goods_img" alt="">
          </div>
          <div class="popup-content" :class="{isX: isIphoneX}">
            <i class="close" @click="popupShow = false"></i>
            <div class="desc">
              <td>
                <tr class="name">{{goodsInfo.goods_name}}</tr>
                <tr class="discount">库存{{goodsInfo.stock}}</tr><br/>
                <tr class="price">￥{{goodsInfo.price}}</tr>
                <!-- <tr class="discount">购买一台可兑换{{goodsInfo.points}}积分</tr> -->
              </td>
            </div>
            <div class="contact-way">
              <div class="contact-text">联系方式</div>
              <div class="contact" @click="fillInInfo = true">
                <span class="people">联系人：{{contactPeople}}</span><span class="phone">{{contactPhone}}</span><i class="more"></i>
              </div>
            </div>
            <div class="type">
              <div class="type-text">规格型号</div>
              <span class="type-item">{{goodsInfo.goods_sn}}</span>
            </div>
            <div class="pay-num">
              <span class="pay-text">购买数量</span><span class="x-num"><x-number width="50px" :min="1" v-model="payNum"></x-number></span>
            </div>
            <div class="sum-price">
              <div class="sum">
                <span class="sum-text">合计</span>
                <span class="money">￥{{payNum*goodsInfo.price}}</span>
                <!-- <x-button type="primary" @click.native="appointment">确定预定</x-button> -->
                <div class="appointment wx-btn " :class="{active: Number(goodsInfo.stock) > 0}" @click="appointment(goodsInfo.stock)">确定预定</div>
              </div>
            </div>
          </div>
        </div>
      </popup>
    </div>

    <div v-transfer-dom>
      <popup v-model="successPage" height="100%" style="background-color:#fff;">
        <div class="successPage">
          <div class="success-icon"></div>
          <div class="success-text">预定成功</div>
          <div class="btn-wrap">
            <!-- todo: 跳转首页商品列表 -->
            <a href="/homepage.html" class="btn btn-y">继续预定</a>
            <!-- todo: 跳转预约单 -->
            <a href="/orderList.html" class="btn btn-n">查看订单</a>
          </div>
        </div>
      </popup>
    </div>

<!--     <div v-transfer-dom>
      <popup v-model="reviewPage" height="100%" style="background: #f4f6f8;">
        <x-header 
          title="评价"
          :left-options="{
            backText: '',
            preventGoBack: true
          }"
          @on-click-back="reviewPage = false">
        </x-header>
        <div class="reviewPage">
          <div class="r-header">
            <img :src="goodsInfo.goods_img" alt="">
            <span class="name">{{goodsInfo.goods_name}}</span>
          </div>
          <div class="score">
            <h5>快点给我评价吧</h5>
            <rater v-model="score" :font-size="32"></rater>
          </div>
          <div class="review-box">
            <textarea class="content" v-model="releaseContent">
            </textarea>
            <div class="tip">写下你的评价吧，晒好评，得积分</div>
            <uploader 
              :max="3"
              :images="upImgs"
              upload-url="/api/goods/uploadCommentPic"
              :show-header="false"
            ></uploader>
            <upload class="upload-img"
              ref="upload"
              :default-list="oldImgs"
              :isClear="clearImg"
              action="/goods/uploadCommentPic">
              <div class="click-add-img">
                <div class="add-text"><span class="add-plus">+</span></div>
              </div>
            </upload>
          </div>
          <button class="wx-btn" :class="{active: score > 0}" @click="release">发布评价</button>
        </div>
      </popup>
    </div> -->

    <div class="v-transfer-dom">
      <popup v-model="fillInInfo" height="100%" style="background: #f4f6f8;z-index:9999;">
        <x-header 
          title="基本资料"
          :left-options="{
            backText: '',
            preventGoBack: true
          }"
          @on-click-back="fillInInfo = false">
        </x-header>
        <div class="base-info">
          <div class="input-wrap auto-width-box">
            <span class="input-text uncertain-box">姓名</span><input class="input-item fill-box" v-model="contactPeople" type="text">
          </div>
          <div class="input-wrap auto-width-box">
            <span class="input-text uncertain-box">联系方式</span><input class="input-item fill-box" v-model="contactPhone" type="text">
          </div>
          <div class="input-wrap auto-width-box">
            <span class="input-text uncertain-box">工作单位</span><input class="input-item fill-box" v-model="contactAddress" type="text">
          </div>
          <div class="wx-btn-wrap">
            <button class="wx-btn active" @click="saveInfo">保存</button>
          </div>
        </div>
      </popup>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import { TransferDom, Popup, XNumber, XButton, Rater, ToastPlugin, XHeader } from 'vux'
import setShareInfo from 'COMMON/wx-share.js'
import moudelReview from 'COMPS/moudel-review'
// import Uploader from 'vux-uploader'
import axios from 'axios'
import tools from 'COMMON/tools.js'
import upload from 'COMPS/upload.vue'
Vue.use(ToastPlugin)

  export default {
    name: 'goods-info',
    directives: {
      TransferDom
    },
    components: {
      moudelReview,
      Popup,
      XNumber,
      XButton,
      Rater,
      upload,
      XHeader
    },
    data: function() {
      return {
        goodsInfo: {},
        userInfo: {},
        goodsId: -1,
        orderId: -1,
        oldImgs: [],
        isCollect: false,
        clearImg: false,
        reviewList: [],
        popupShow: false,
        contactPeople: '',
        contactPhone: '',
        contactAddress: '',
        payNum: 1,
        successPage: false,
        // reviewPage: false,
        fillInInfo: false,
        allReview: false,
        // score: 0,
        orderId: '',
        // releaseContent: "质量好，包装好，下次还会再买"
      }
    },
    mounted() {
      this.goodsId = tools.getArg('id', String(location.href).replace(/[#]*$/g, ""));
      this.orderId = tools.getArg('order_id', String(location.href).replace(/[#]*$/g, ""));
      this.getGoodsInfo();
      this.getUserInfo();
      // let shareInfo = {
      //   title: this.goodsInfo.name,
      //   desc: '分享文字',
      //   imgUrl:this.goodsInfo.cover
      // }
      // setShareInfo(shareInfo)
    },
    computed: {
      isIphoneX() {
        return /iphone/gi.test(navigator.userAgent) && (screen.height == 724 && screen.width == 375)
      }
    },
    methods: {
      getGoodsInfo() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise(function(resolve) {
            resolve({
                goods_id: '1',
                goods_name: '精密仪器隔振精密仪器精密仪器隔振精密仪器精密仪器隔振精密仪器',
                describe: "应       用：各类工业领域的液位测量<br>测量范围：液体:(0.5～15)<br>过程连接：法兰或吊架<br>换能器外壳材料：PU/PC、 防静电PP<br>过程温度：(-40～70)°C<br>过程压力：(-0.02～0.1)MPa<br>信号输出：(4～20)mA/HART<br>电       源：两线制(DC24V)<br>四线制(DC24V/AC220V)",
                price: '15000.00',
                goods_video: 'https://video.juwairen.net/Video/video_1264_201809171041113308.mp4',
                goods_img: 'http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg',
                points: '500',
                comment_num: '4',
                goods_sell_num: '10',
                goods_sn: 'SN_123213',
                goods_sell_num: '21',
                is_user_collect: true,
                stock: '0'
              })
          }).then(function(data){
            that.isCollect = data.is_user_collect;
            that.goodsInfo = data;
            that.getReviewList();
          })
        }

        axios.get('/Goods/goodsInfo', {
          params: {
            goods_id: that.goodsId
          }
        }).then((res) => {
          that.isCollect = res.data.is_user_collect;
          that.goodsInfo = res.data;
          that.getReviewList();
        })

      },
      getReviewList() {
        let that = this;
        console.log(that.goodsInfo.goods_id)
        if (window.DEBUGGING) {
          return new Promise(function(resolve) {
            resolve([{
              commentId: 1,
              avatar: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267' ,
              name: '小花园0',
              commentStar: 3,
              commentTime: '2018-09-01',
              commentText: '怕是评价过期了就先来一张图片，质量很好，仪器很满意。',
              commentImgs: ['http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg','http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg']
            },{
              commentId: 2,
              avatar: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267' ,
              name: '小花园1',
              commentStar: 4,
              commentTime: '2018-09-01',
              commentText: '怕是评价过期了就先来一张图片',
              commentImgs: ['http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg']
            },{
              commentId: 3,
              avatar: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267' ,
              name: '小花园2',
              commentStar: 3,
              commentTime: '2018-09-01',
              commentText: '怕是评价过期了就先来一张图片，质量很好，仪器很满意。',
              commentImgs: ['http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg','http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg']
            },{
              commentId: 4,
              avatar: 'https://juwairenimg.oss-cn-hangzhou.aliyuncs.com/Face/faceimg_6341_200.jpg?x-oss-process=image/resize,w_70&&token=1536031775267' ,
              name: '小花园3',
              commentStar: 3,
              commentTime: '2018-09-01',
              commentText: '怕是评价过期了就先来一张图片，质量很好，仪器很满意。',
              commentImgs: ['http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg','http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg']
            }])
          }).then(function(data){
            that.reviewList = data;
          })
        }

        axios.get('/goods/commentList', {
          params: {
            goods_id: that.goodsInfo.goods_id,
            page: 1
          }
        }).then((res) => {
          if(res.data.status == false) {
            return
          }
          that.reviewList = res.data.map((e, index) => {
            return {
              commentId: e.comment_id,
              avatar: e.user_avatar,
              name: e.user_name,
              commentStar: e.stars,
              commentTime: e.comment_time,
              commentText: e.comment_text,
              commentImgs: e.comment_imgs
            }
          })
        })

      },
      getUserInfo() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve({
              "address": "yti rctx",
              "user_name": "rose",
              "user_phone": "321"
            })
          }).then((data) => {
            that.contactPeople = data.user_name;
            that.contactPhone = data.user_phone;
            that.contactAddress = data.address;
          })
        }

        axios.post('/user/userinfo').then((res) => {
          that.contactPeople = res.data.user_name;
          that.contactPhone = res.data.user_phone;
          that.contactAddress = res.data.address;
        })
      },
      toAppointment() {
        if (!window.IS_LOGINED) {
          return location.href = "/login.html";
        }
        this.popupShow = true;
      },
      // 确定预约
      appointment(stock) {
        if (Number(stock) <= 0) {
          return;
        }
        let that = this;
        if (window.DEBUGGING) {
          this.successPage = true
        }

        axios.post('/Order/GenerateOrder',{
          orderInfo: [{
            goods_id: that.goodsInfo.goods_id,
            num: that.payNum
          }],
          addressId: 0,
          payType: 1
        }).then((res) => {
          if(res.code == 200) {
            that.orderId =  res.data.order_id
            that.successPage = true
          } else {
            that.$vux.toast.text(res.msg, 'middle');
          }
        })
      },
      // reviewPop() {
      //   if (!window.IS_LOGINED) {
      //     return location.href = "/login.html";
      //   }
      //   if(this.orderId == "") {
      //     return this.$vux.toast.text('预约之后才能评价', 'middle');
      //   }
      //   this.reviewPage = true;
      // },
      // 评价
      // release() {
      //   if(this.score < 1) {
      //     return false;
      //   }

      //   if (window.DEBUGGING) {
      //     this.$vux.toast.text('发布成功', 'middle');
      //   }

      //   let that = this;
      //   axios.post('/goods/addComment',{
      //     order_id: that.orderId,
      //     goods_id: that.goodsInfo.goods_id,
      //     content: that.releaseContent,
      //     stars: that.score,
      //     imgs: that.oldImgs 
      //   }).then((res) => {
      //     if(res.msg == 'success') {
      //       that.$vux.toast.text('发布成功', 'middle');
      //       this.reviewPage = false;
      //     }
      //   })
      // },
      // 保存预约用户信息
      saveInfo() {
        this.fillInInfo = false;

        let that = this;
        // todo: 保存填写的信息
        axios.post('/user/saveUserinfo',{
          user_name: that.contactPeople,
          phone: that.contactPhone,
          address: that.contactAddress
        }).then((res) => {
          that.fillInInfo = false;
        })
      },
      // 收藏
      collect() {
        if (!window.IS_LOGINED) {
          return location.href = "/login.html";
        }
        let that = this;
        if (this.isCollect) {
          this.cancelCollect();
        } else {
          axios.post('/collection/addCollection', {
            goods_id: that.goodsInfo.goods_id
          }).then((res) => {
            that.isCollect = true;
          })
        }
      },
      // 取消收藏
      cancelCollect() {
        let that = this;
        axios.post('/collection/deleteCollection', {
          goods_id: that.goodsInfo.goods_id
        }).then((res) => {
          that.isCollect = false;
        })
      },
      // 分享
      share() {
        //todo: 分享
        /*let shareInfo = {
          title: this.goodsInfo.name,
          desc: '分享文字',
          imgUrl:this.goodsInfo.cover
        }
        setShareInfo(shareInfo)*/
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

body {
  margin: 0px; padding: 0px;
  background-color: #f4f6f8;
}
  .goods-info {
    padding-bottom: 54px;
    .goods-img {
      background-color: #fff;
      >img {
        width: 100%;
        height: 250px;
      }
    }
    .goods-price {
      padding: 20px 16px;
      background-color: #fff;
      line-height: 30px;
      .name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      .price-footer {
        color: #ff3939;
        font-size: 14px;
        .cash {
          font-size: 20px;
        }
        .points {
          float: right;
          font-size: 14px;
          color: #F5A623;
        }
      }
    }
    .goods-type {
      margin-top: 10px;
      background-color: #fff;
      line-height: 48px;
      .select-type, .parameter {
        padding: 0 18px;
        .text {
          font-size: 14px;
          color: #999;
        }
        .tips {
          // display: -webkit-box;
          display: inline-block;
          float: right;
          text-align: left;
          width: 260px;
          font-size: 14px;
          color: #999;
          overflow: hidden;
          
        }
        .more {
          display: inline-block;
          float: right;
          margin-top: 22px;
          width: 6px;
          height: 11px;
          background-image: url(~IMGS/more.png);
          background-size: 100%;
        }
      }
      .parameter {
        line-height: 26px;
        .text {
          vertical-align: top;
        }
      }
      .select-type {
        &:active {
          background-color: #ececec;
        }
        .tips {
          .Mult-line(1);
        }
      }
      .parameter {
        .tips {
          color: #999;
        }
      }
    }
    .review {
      margin-top: 10px;
      .nav-header {
        padding-left: 20px;
        padding-right: 15px;
        line-height: 35px;
        background-color: #fff;
        .review-num {
          font-size: 14px;
          color: #333;
        }
        .look-all {
          float: right;
          font-size: 12px;
          color: #666;
        }
      }
    }
    .goods-info-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 54px;
      background-color: #fff;
      .icon-wrap {
        width: 150px;
        height: 54px;
        text-align: center;
        .icon-item {
          padding-top: 8px;
          font-size: 11px;
          color: #666;
          &:active {
            background-color: #ececec;
          }
          >i {
            display: inline-block;
            background-size: 100%;
            background-repeat: no-repeat; 
          }
          .icon-collect {
            width: 19px;
            height: 18px;
            background-image: url(~IMGS/collect-icon.png);
            &.active {
              background-image: url(~IMGS/collect-active-icon.png);
            }
          }
          // .icon-share {
          //   width: 16px;
          //   height: 16px;
          //   background-image: url(~IMGS/share-icon.png);
          // }
          // .icon-review {
          //   width: 17px;
          //   height: 17px;
          //   background-image: url(~IMGS/review-icon.png);
          // }
        }
      }
      .appointment {
        flex: 1;
        // padding: 0 38px;
        line-height: 54px;
        text-align: center;
        color: #fff;
        background-color: #00A24D;
      }
    }
  }
  .popup-box {
    position: relative;
    height: 510px;
    &.isX {
      height: 555px;
    }
    .goods-cover {
      display: inline-block;
      position: absolute;
      top: 0px;
      left: 15px;
      z-index: 666;
      padding: 8px 10px;
      border-radius: 5px;
      background-color: #fff;
      >img {
        width: 100px;
        height: 100px;
      }
    }
    .popup-content {
      position: absolute;
      top: 15px;
      left: 0px;
      width: 100%;
      height: 495px;
      &.isX {
        height: 540px;
      }
      background-color: #fff;
      .close {
        display: inline-block;
        position: absolute;
        top: 15px;
        right: 15px;
        width: 20px;
        height: 20px;
        background-image: url(~IMGS/circle-close.png);
        background-size: 100%;
      }
      .desc {
        margin-left: 20px;
        margin-right: 12px;
        padding-left: 140px;
        padding-bottom: 35px;
        padding-right: 20px;
        border-bottom: 1px solid #eaeaea;
        >td {
          font-size: 16px;
          padding-top: 15px;
          .name {
            .Mult-line(1);
            color: #333;
          }
          .price {
            display: inline-block;
            color: #F5A623;
            margin: 8px 0;
          }
          .discount {
            display: inline-block;
            margin-top: 5px;
            font-size: 12px;
            color: #9B9B9B;
          }
        }
      }
      .contact-way {
        padding: 18px 0 20px 0;
        margin-left: 20px;
        margin-right: 12px;
        border-bottom: 1px solid #eaeaea;
        .contact-text {
          margin-bottom: 10px;
          font-size: 14px;
          color: #333;
        }
        .contact {
          font-size: 12px;
          color: #999;
          text-align: right;
          .people {
            float: left;
          }
          .more {
            display: inline-block;
            vertical-align: middle;
            width: 6px;
            height: 13px;
            margin-left: 15px;
            background-image: url(~IMGS/more.png);
            background-size: 100%;
            background-repeat: no-repeat;
          }
        }
      }
      .type {
        padding-top: 12px;
        padding-bottom: 20px;
        margin-left: 20px;
        margin-right: 12px;
        color: #333;
        border-bottom: 1px solid #eaeaea;
        .type-text {
          font-size: 14px;
          margin-bottom: 15px;
        }
        .type-item {
          display: inline-block;
          font-size: 12px;
          line-height: 20px;
          padding: 0 10px;
          background: #F1F1F1;
          border-radius: 2px;
        }
      }
      .pay-num {
        margin-left: 20px;
        margin-right: 12px;
        line-height: 56px;
        border-bottom: 1px solid #eaeaea;
        color: #333;
        svg {
          fill: #333;
        }
        .pay-text {
          font-size: 14px;
        }
        .x-num {
          float: right;
          .weui-cell {
            padding: 0px;
            padding-top: 15px;
          }
          .vux-cell-primary {
            .vux-number-selector-sub {
              height: 22px;
              padding: 3px 10px 0px 10px;
            }
            .vux-number-selector-plus {
              height: 23px;
              padding: 2px 10px 0px 10px;
            }
            input {
              padding: 0;
              height: 25px;
              font-size: 14px;
            }
          }
        }
      }
      .sum-price {
        margin-left: 20px;
        margin-right: 12px;
        padding-top: 20px;
        font-size: 14px;
        color: #333;
        line-height: 60px;
        .money {
          float: right;
          font-size: 18px;
          color: #ff3939;
        }
        .appointment {
          margin-top: 0px;
          text-align: center;
        }
      }
    }
  }

  .successPage {
    color: #333;
    text-align: center;
    .success-icon {
      .Round(120px);
      margin: 0 auto;
      margin-top: 5.8rem;
      background-image: url(~IMGS/success-icon-lg.png);
      background-size: 100%;
    }
    .success-text {
      margin-top: 2.5rem;
      margin-bottom: 3.8rem;
      font-size: 24px;
    }
    .btn-wrap {
      .btn {
        display: inline-block;
        border-radius: 4px;
        width: 150px;
        line-height: 44px;
        text-align: center;
        border-radius: 5px;
      }
      .btn-y {
        margin-right: 20px;
        color: #fff;
        background-color: #00A24D;
      }
      .btn-n {
        background: #F5F5F5;
        border: 1px solid #EAEAEA;
      }
    }
  }

  // .reviewPage {
  //   color: #333;
  //   padding: 15px;
  //   background-color: #fff;
  //   .r-header {
  //     >img {
  //       vertical-align: middle;
  //       margin-right: 10px;
  //       height: 32px;
  //       width: 32px;
  //     }
  //     .name {
  //       font-size: 16px;
  //       vertical-align: middle;
  //     }
  //   }
  //   .score {
  //     margin-bottom: 20px;
  //     text-align: center;
  //     >h5 {
  //       font-weight: normal;
  //       font-size: 16px;
  //       margin-top: 30px;
  //       margin-bottom: 15px;
  //     }
  //   }
  //   .review-box {
  //     position: relative;
  //     width: 100%;
  //     background: #F5F5F5;
  //     border-radius: 5px;
  //     overflow: hidden;
  //     .upload-img {
  //       // margin-top: 15px;
  //       margin-left: 13px;
  //       margin-bottom: 13px;
  //       .ivu-upload-list {
  //         display: none;
  //       }
  //     }
  //     .click-add-img {
  //       box-sizing: border-box;
  //       cursor: pointer;
  //       text-align: center;
  //       width: 72px;
  //       height: 72px;
  //       color: #666;
  //       border: solid 1px #dcdcdc;
  //       background: #F9F9F9;
  //       .add-text {
  //         >span{vertical-align: middle;}
  //         .add-plus {
  //           font-size: 36px;
  //           line-height: 72px;
  //         }
  //       }
  //     }
  //     .weui-cell {
  //       padding: 0px;
  //       padding-left: 15px;
  //     }
  //     .tip {
  //       position: absolute;
  //       bottom: 10px;
  //       right: 12px;
  //       font-size: 12px;
  //       color: #AAAAAA;
  //     }
  //     .content {
  //       box-sizing: border-box;
  //       resize:none;
  //       border: none;
  //       outline: none;
  //       width: 100%;
  //       min-height: 200px;
  //       padding: 15px;
  //       background-color: #f5f5f5;
  //       font-family: PingFangSC-Regular;
  //       font-size: 14px;
  //       overflow: hidden;
  //     }
  //   }
  //   // .release {
  //   //   box-sizing: border-box;
  //   //   border: none;
  //   //   outline: none;
  //   //   width: 100%;
  //   //   margin-top: 30px;
  //   //   line-height: 44px;
  //   //   font-size: 16px;
  //   //   border-radius: 5px;
  //   //   color: #fff;
  //   //   background: #9B9B9B;
  //   //   &.active {
  //   //     background: #039D4C;
  //   //   }
  //   // }
  // }

  .base-info {
    font-size: 16px;
    color: #333;
    .input-wrap {
      text-align: right;
      line-height: 54px;
      margin-bottom: 1px;
      padding: 0 16px;
      background-color: #fff;
      .input-text {
        padding-right: 20px;
      }
      .input-item {
        outline: none;
        border: none;
        text-align: right;
        font-size: 16px;
        height: 54px;
      }
    }
    .wx-btn-wrap {
      padding: 0 16px;
    }
  }
</style>